<template>
  <div class="rank">
    <div class="rank-table">
      <el-card :body-style="{ padding: '0px' }">
        <div slot="header">
          <h4>{{ rankName[type] }}</h4>
        </div>
        <el-table v-loading="loading" :data="rankData" stripe>
          <el-table-column prop="rank" label="排名" width="80" />
          <el-table-column prop="name" label="名字" />
          <el-table-column prop="value" :label="valueName" width="100" />
        </el-table>
      </el-card>
    </div>
    <div class="rank-type">
      <el-menu @select="handleSelect" default-active="1" class="rank-type-menu" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
        <el-menu-item index="0" disabled>
          <h3 slot="title">选择榜单</h3>
        </el-menu-item>
        <el-menu-item index="score">
          <i class="el-icon-menu"></i>
          <span slot="title">{{ rankName['score'] }}</span>
        </el-menu-item>
        <el-menu-item index="sign">
          <i class="el-icon-document"></i>
          <span slot="title">{{ rankName['sign'] }}</span>
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>


<script>
import api from "@/api";
export default {
  data() {
    return {
      rankList: {
        scoreRankList: [],
        signRankList: [],
      },
      type: "score",
      rankName: {
        score: "积分榜",
        sign: "签到榜"
      },
      loading: true
    };
  },
  created() {
    this.getRankList();
  },
  methods: {
    async getRankList() {
      const { data } = await api.getRank();
      this.rankList = data;
      this.loading = false;
    },
    handleSelect(index) {
      this.type = index;
    }
  },
  computed: {
    rankData() {
      // 通过当前选择的排行榜类型，拼接并获取应名称的computed数据
      // 例如当前选中的是积分排行，就返回 ['score' + 'Rank'] 的数据
      return this[`${this.type}Rank`];
    },
    scoreRank() {
      return this.rankList["scoreRankList"]
        .map((item, i) => {
          return {
            rank: i + 1,
            name: item.userName,
            value: item.userScore
          };
        });
    },
    signRank() {
      return this.rankList["signRankList"]
        .map((item, i) => {
          return {
            rank: i + 1,
            name: item.userName,
            value: item.userSignDuration
          };
        });
    },
    valueName() {
      return this.type === "score" ? "总积分" : "学习时间";
    }
  }
};
</script>

<style lang="scss" scoped>
.rank {
  padding-top: 25px;
  display: flex;
  justify-content: center;
}
.rank-table {
  width: 100%;
  max-width: 900px;
}
.rank-type {
  width: 300px;
  margin-left: 50px;
}
</style>

